<script type="text/html" data-help-name="ui-switch">
    <p>
        Adds a toggle switch to the user interface.
    </p>
    <p>
        Each change in the state of the switch will generate
        a <code>msg.payload</code> with the specified <b>On</b> and <b>Off</b> values.
    </p>
    <p>
        The <b>On/Off Color</b> and <b>On/Off Icon</b> are optional fields. If the icons are present, the default
        toggle switch will be replaced with the relevant icons and their respective colors (if defined).
    </p>
    <p>
        The <b>On/Off Icon</b> field should be a <a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design icon</a>
        <i>(e.g. 'wifi', 'home')</i>.
    </p>
    <p>
        The switch state can be updated by an incoming <code>msg.payload</code>. The values must either be <code>true</code>/<code>false</code>
        or match the specified type (number, string, etc) in the node's configuration.</p>
    <!-- <p>
        The label can also be set by a message property by setting
    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
    <p>If a <b>Topic</b> is specified, it will be added to the output as <code>msg.topic</code>.</p> -->
    <!-- <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the switch widget.</p> -->
    <!-- <p>
        If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card
        and the elements inside it with custom CSS. The Class can be set at runtime by setting a
        <code>msg.className</code> string property.
    </p> -->
    <h3>Dynamic Properties (Inputs)</h3>
    <p>Any of the following can be appended to a <code>msg.</code> in order to override or set properties on this node at runtime.</p>
    <dl class="message-properties">
        <dt class="optional">class <span class="property-type">string</span></dt>
        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
    </dl>
</script>